<template>
  <div>
    <el-dialog :title="status.isAdd?'轮播图添加':'轮播图编辑'" :visible.sync="status.isshow" 
    @closed="closed" width="30%">
      <el-form :model="form">
        {{ form }}
        {{ imgUrl }}

        <el-form-item label="标题">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <!--  
             文件上传时候的钩子的    :on-success="handleAvatarSuccess" 
            -->
        <el-form-item label="上传图片">
         <upload-img @getFile="form.imgUrl = $event" v-if="status.isshow" ref="upload"></upload-img>
        </el-form-item>
        <el-form-item label="状态" label-width="40px">
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="2"
          ></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" v-if="status.isAdd" @click="add ">
          添加
        </el-button>
        <el-button type="primary" v-else @click="update"
          >修改</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {reqbanneradd,reqbannerinfo,reqbanneredit}from "../../../http/api";
import {successAlert}from "../../../utils/alert"
import{mapActions,mapGetters}from "vuex"
// import
export default {
props:["status"],
computed:{
...mapGetters({
  list:"banner/list",
})
},

data(){
  
  return{
    imgUrl:"",
    input:"",
    form:{
       title:"",
       img:"",
       status:1
    }
  }
},
methods:{
  ...mapActions({
    reqList:"banner/reqList",
  }),
  empty(){
    this.form={
      title:"",
      img:"",
      status:1
    }
    this.imgUrl=""
  },
  add(){
    reqbanneradd(this.form).then((res)=>{
      if(res.data.code==200){
        successAlert(res.data.msg);
        this.empty()
        this.status.isshow=false;
        this.reqList()
      }
    })
  },
   getOne(id){
      reqbannerinfo({
        id:id
      }).then((res)=>{
        if(res.data.code==200){
          console.log(res);
          this.form= res.data.list;
          this.form.id=id;
          this.$refs.upload.changeimgUrl(this.$pre+this.form.img)
        }
      })
    },
  update(){
    reqbanneredit(this.form).then(res=>{
      if(res.data.code==200){
        successAlert(res.data.msg);
        this.empty()
        this.status.isshow=false
        this.reqList()
      }
    })
  },
  closed(){
    if(!this.status.isAdd){
      this.empty()
    }
  }
}
}
</script>

<style scoped lang="less">
@import "../../../less/index.less";
.my-upload {
  margin-left: 80px;
  width: 100px;
  height: 100px;
  border: 1px dashed @primary;
  position: relative;
}
.my-upload-plus {
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 100px;
}
.my-upload-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.my-upload-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
</style>